<template>
	<div class="layout-padding">
		<el-card shadow="hover" style="overflow-y: auto">
			<el-table :data="tableData.data" row-key="Id">
				<el-table-column label="菜单标题" width="150">
					<template #default="scope">
						<SvgIcon :name="scope.row.Icon" />
						<span class="ml10">{{ scope.row.Title }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="Name" label="路由名称" width="160"> </el-table-column>
				<el-table-column prop="Path" label="路由路径" width="160"> </el-table-column>
				<el-table-column prop="Component" label="组件路径" width="260"> </el-table-column>
				<el-table-column prop="Permission" label="操作权限" width="200"></el-table-column>
				<el-table-column label="显示菜单" width="100">
					<template #default="scope">
						<el-tag type="success" v-if="!scope.row.IsHide">显示</el-tag>
						<el-tag type="info" v-else>隐藏</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="Sort" label="排序" width="60"></el-table-column>
				<el-table-column prop="Type" label="类型" width="80"></el-table-column>
				<el-table-column label="Api标签" width="200">
					<template #default="scope">
						<el-tag type="primary" v-if="scope.row.ApiTag">{{ scope.row.ApiTag }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="120" align="center">
					<template #default="scope">
						<PermissionButton
							size="small"
							text
							type="success"
							@click="onEdit(0, scope.row.ParentId, { Component: scope.row.Component, Path: scope.row.Path })"
							style="margin-left: 12px"
							label="新增平级菜单"
							name="Add"
						></PermissionButton>
						<PermissionButton
							size="small"
							text
							type="primary"
							@click="onEdit(0, scope.row.Id, { Component: scope.row.Component, Path: scope.row.Path })"
							v-if="scope.row.Type == 'Menu'"
							label="新增下级菜单"
							name="Add"
						></PermissionButton>
						<PermissionButton
							size="small"
							text
							type="info"
							@click="onShowTag(scope.row.Id)"
							v-if="scope.row.Type == 'Menu'"
							label="新增操作按钮"
							name="Add"
						></PermissionButton>
						<PermissionButton
							size="small"
							text
							type="warning"
							@click="onEdit(scope.row.Id, scope.row.ParentId)"
							label="编辑"
							name="Put"
						></PermissionButton>
						<PermissionButton size="small" text type="danger" @click="onRemove(scope.row.Id)" label="删除" name="Delete"></PermissionButton>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog draggable title="为该页面添加【新增、编辑、删除】按钮" v-model="showTag" width="40%">
			<el-select style="width: 100%" v-model="apiTagData.Value" placeholder="请选择Api标签">
				<el-option v-for="item in apiTagData.Data" :key="item" :label="item" :value="item" />
			</el-select>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="onAddBtn">确定</el-button>
				</div>
			</template></el-dialog
		>

		<EditDialog ref="refEdit" @refresh="loadData()" />
	</div>
</template>

<script setup lang="ts">
import { Ref, ref, onMounted } from 'vue';
import EMsg from '/@/common/eMsg';
import EditDialog from './edit.vue';
import PermissionButton from '/@/components/permissionButton/index.vue';
import { Post, Get } from '/@/common/http';

const refEdit = ref();
const formData = ref({
	Title: '',
});
const tableData: Ref = ref({
	data: [],
	selection: [],
	total: 0,
});
const apiTagData = ref({
	Data: [],
	Value: '',
});

const showTag = ref(false);

const loadData = () => {
	Get('SysMenu/GetMenus').then((res: any) => {
		tableData.value.data = res.Data;
	});
};

const onEdit = (id: number, parentId: number, parentData: any | null = null) => {
	refEdit.value.onShow(id, parentId, parentData);
};

const onRemove = (id: number) => {
	EMsg.confirm(`确定删除该数据？`, () => {
		Post('SysMenu/DeleteMenus', { Id: id }, (res: any) => {
			if (res.Code == 0) {
				EMsg.success('删除成功');
				loadData();
			} else {
				EMsg.error('删除失败');
			}
		});
	});
};

let btnParentId = -1;
const onShowTag = (parentId: number) => {
	btnParentId = parentId;
	Get('SysMenu/GetApiTag', {}).then((res: any) => {
		apiTagData.value.Data = res.Data;
	});
	showTag.value = true;
};

const onAddBtn = () => {
	if (apiTagData.value.Value == '') {
		EMsg.error('请选择Api标签');
		return;
	}
	Post('SysMenu/AddPageButtons', { Id: btnParentId, ApiTag: apiTagData.value.Value }, (res: any) => {
		EMsg.success(res.Msg);
		loadData();
		apiTagData.value.Value="";
		showTag.value = false;
	});
};

onMounted(() => {
	loadData();
});
</script>
